import { FunctionComponent } from "react";
import { Form, FormProps, Input, Button, Checkbox } from "antd"
import style from "./index.less"
import RouteService from "@/core/RouteService";

interface IProps { }

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};

const Login: FunctionComponent<IProps> = () => {

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        const { username } = values;
        localStorage.setItem("token",username||'')
        RouteService.redirectTo("/")
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className={style.login}>
            <div className={style.login_content}>
                <div className={style.login_content_title}>用户信息登录</div>
                <Form
                    style={{ width: 500 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        name="username"
                        rules={[{ required: true, message: '请输入您的学号！' }]}
                    >
                        <Input size="large" placeholder="用户名: 学号" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="password"
                        rules={[{ required: true, message: '请输入您的身份证后6位!' }]}
                    >
                        <Input.Password size="large" placeholder="密码: 身份证后6位" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="remember"
                        valuePropName="checked"
                    >
                        <div>
                            <Checkbox>记住密码</Checkbox>
                            <a href="#" style={{ float: "right" }}>忘记密码</a>
                        </div>
                    </Form.Item>

                    <Form.Item>
                        <Button block size="large" type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}


export default Login